<template>
	<view class="testPlay">
		<view class="back" @click="back()">
			< <text>{{info.name}}</text>
		</view>
		<view class="notice">
			<view class="box" v-if="notice.length>0" :style="{width:notice.length*800+'rpx'}">
				<view class="xiaoxi" v-for="(item,index) in notice" :key="index+'notice'">
					<image class="avatar" :src="item.avatar"></image>
					{{item.user_name.substr(0,1)}}**开出&nbsp;<text
						:class="getClass(item.type)">{{item.type}}款</text>&nbsp;
				</view>
			</view>
		</view>
		<view class="info" v-if="goods.length>0">
			<view class="box">
				<image src="../../static/images/newhone/Podium.png" class="Podium"></image>
				<image class="goodimg" :src="goods[curIndex].cover_image"></image>
			</view>
			<view class="name">{{goods[curIndex].goods_name}}</view>
			<view class="price">参考价￥{{goods[curIndex].goods_price}}</view>
		</view>
		<view class="list" v-if="contentShowType === 2">
			<view class="typeBtns">
				<view class="btnTxt" @click="changeRecordType(item)" :class="{'active':recordActive == item.type}"
					v-for="item in btns" :key="item.type">{{item.label}}
				</view>
				<view class="rBtn" @click="contentShowType=1">
					{{'< 返回'}}
				</view>
			</view>
			<view class="records">
				<view class="record_item" v-for="(item,index) in curRecordList" :key="index">
					<image class="record_img" :src="item.avatar"></image>
					<view class="record_name">{{item.user_name.substr(0,1)}}**</view>
					<view class="record_type" :class="getbgClass(item.type)">{{item.type}}</view>
					<view class="record_goodName">{{item.goods_name}}</view>
				</view>
				<view class="noRecord" v-if="curRecordList.length===0">暂无数据...</view>
			</view>
		</view>
		<view class="list" v-else>
			<view class="gailv">
				<view class="lv" :class="'lv'+(index+1)" v-for="(item,index) in lvs" :key="item.txt">
					<view class="txt">{{item.txt}}</view>
					<view class="num">
						{{item.num}}%
					</view>
				</view>
				<image @click="contentShowType=2" class="zhongjiangjilu"
					src="../../static/images/newhone/zhongjiangjilu.png"></image>
			</view>
			<view class="goods">
				<view class="li" :class="{current:curIndex === index}" @click="lookGood(item,index)"
					v-for="(item,index) in goods" :key="item.goods_id">
					<view class="box" :style="getBorderColor(item.type)">
						<image :src="item.cover_image"></image>
						<view class="type" :class="'type'+item.type">{{item.type|typeFilter}}</view>
					</view>
					<view class="name">{{item.goods_name}}</view>
				</view>
			</view>
		</view>
		<view class="btns">
			<image class="chou1" @click="goPay(1)" src="../../static/images/newhone/1chou.png"></image>
			<image class="chou3" @click="goPay(3)" src="../../static/images/newhone/3chou.png"></image>
			<image class="chou5" @click="goPay(2)" src="../../static/images/newhone/5chou.png"></image>

		</view>
		<u-popup v-model="payShow" mode="bottom" border-radius="36" :mask-close-able="false">
			<PayBox :info="payInfo" :payBalance="payBalance" @close="payShow = false" @paySuccess="paySuccess" />
		</u-popup>
		<All v-if="allShow" @paly="paly()" @pause="pause" :list="goods" @close="jump" />
	</view>
</template>

<script>
	import PayBox from './components/pay.vue'
	import All from './components/all.vue'
	export default {
		components: {
			PayBox,
			All
		},
		data() {
			return {
				recordActive: 0,
				contentShowType: 1,
				curIndex: 0,
				btns: [{
						label: '全部',
						type: '0',
					}, {
						label: '传说',
						type: '1',
					}, {
						label: '史诗',
						type: '2',
					},
					{
						label: '稀有',
						type: '3',
					},
				],
				lvs: [],
				id: '',
				curLevel: 0,
				goods: [],
				payShow: false,
				allShow: false,
				payInfo: {},
				palyAgain: null,
				num: 1,
				order_id: '',

				notice: [],
				curRecordList: [],
				timer: null,
				bgmMusic: null
			}
		},
		filters: {
			typeFilter(v) {
				switch (v) {
					case 1:
						return '传说款';
					case 2:
						return '史诗款';
					case 3:
						return '稀有款';
					case 4:
						return '普通款';
					default:
						break;
				}
			}
		},
		onLoad(option) {

			this.info = JSON.parse(option.option)


			this.lvs = [{
					txt: '传说款',
					label: '传说',
					type: '1',
					num: this.info.cs
				}, {
					txt: '史诗款',
					label: '史诗',
					type: '2',
					num: this.info.ss
				},
				{
					txt: '稀有款',
					label: '稀有',
					type: '3',
					num: this.info.xy
				}, {
					txt: '普通款',
					label: '普通',
					type: '4',
					num: this.info.pt
				},
			]
			console.log(this.info, 'option');
			this.id = this.info.id
			this.rollnotice()
			this.getMoreGood()
		},
		onHide() {

		},
		onShow() {
			if (this.palyAgain) {
				this.num = this.palyAgain
				this.goPay(this.num)
				this.palyAgain = null
			}

		},
		methods: {
			paly() {


			},
			pause() {
				// this.bgmMusic.pause()
			},
			changeRecordType(row) {
				this.recordActive = row.type
				if (row.label === '全部') {
					this.curRecordList = this.notice
					return
				}
				this.curRecordList = this.notice.filter(item => item.type == row.label)
			},
			back() {
				if (!uni.getStorageSync('token')) {
					uni.switchTab({
						url: '/pages/choujiang/index'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			getClass(str) {
				if (str === '传说') return 'lv1'
				if (str === '史诗') return 'lv2'
				if (str === '稀有') return 'lv3'
				if (str === '普通') return 'lv4'
			},
			getbgClass(str) {
				if (str === '传说') return 'typebg1'
				if (str === '史诗') return 'typebg2'
				if (str === '稀有') return 'typebg3'
				if (str === '普通') return 'typebg4'
			},
			getBorderColor(str) {
				if (str === 1) return 'border:1px solid #7e1221;'
				if (str === 2) return 'border:1px solid #57517d;'
				if (str === 3) return 'border:1px solid #ba886f;'
				if (str === 4) return 'border:1px solid #6172aa;'

			},
			jump() {
				this.allShow = false
				uni.navigateTo({
					url: `/pages/choujiang/index2?num=${this.num}&order_id=${this.order_id}&id=${this.id}`
				})
			},
			paySuccess(option) {
				console.log(option,'ssssss');
			
				this.payShow = false
				this.order_id = option.order_id
				this.allShow = true
			
					
			},
			lookGood(item, index) {
				this.curIndex = index
			},
			goPay(num) {
				
				this.num = num
				this.$api.indexExtractboxa({
					activity_id: this.id,
					open_method: num
				}).then(res => {
					this.payBalance = res.balance;
					this.payInfo = {
						...res.order_info,
						num
					};
					this.payShow = true
				})

			},
			getMoreGood() {
				uni.showLoading()
				this.$api
					.indexMoregoods({
						activity_id: this.id,
						type: this.curLevel
					})
					.then(res => {
						uni.hideLoading();
						this.goods = res;
					});
			},
			//获取滚动公告
			rollnotice() {
				this.$api.rollnotice().then(res => {
					this.notice = res;
					this.curRecordList = res
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.testPlay {
		height: 100vh;
		overflow-y: auto;
		background-image: url('/static/images/newhone/cjbg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center center;
		color: #fff;

		.back {
			padding: 26rpx 0 0 50rpx;

			font-size: 50rpx;

			text {
				width: 100%;
				display: inline-block;
				text-align: center;
				font-size: 32rpx;
				transform: translateY(-70rpx);
			}
		}

		.notice {
			width: 100%;
			position: absolute;
			left: 0;
			top: 100rpx;
			z-index: 2;

			.box {
				display: flex;
				align-items: center;
				animation: move 50s linear infinite;
			}

			.xiaoxi {
				width: 440rpx;
				padding: 10rpx;
				background: linear-gradient(to right, rgba(43, 112, 143, .5), rgba(7, 23, 49, 0.5));
				border-radius: 50rpx 0 0 50rpx;
				display: flex;
				align-items: center;
				margin-right: 200rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				text {
					margin-left: 20rpx;
				}
			}
		}

		@keyframes move {
			from {
				transform: translateX(0);
			}

			to {
				transform: translateX(-50%);
			}
		}

		.info {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 0rpx;

			.box {
				width: 600rpx;
				height: 400rpx;
				position: relative;

				.Podium {
					width: 100%;
					height: 100%;
					position: absolute;
					left: -8%;
					top: 10%;
				}

				.goodimg {
					width: 300rpx;
					height: 300rpx;
					position: relative;
					left: 140rpx;
					top: -10%;
				}
			}

			.name {
				width: 440rpx;
				height: 80rpx;
				text-align: center;
				font-size: 24rpx;
				line-height: 40rpx;
				margin-top: 20rpx;
				display: -webkit-box;
				overflow: hidden;
				white-space: normal !important;
				text-overflow: ellipsis;
				word-wrap: break-word;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.price {
				font-size: 28rpx;
				margin-top: 30rpx;
			}
		}

		.list {
			width: 710rpx;
			border: 1px solid #a5d4ee;
			box-shadow: 0px 0px 20rpx 10rpx #a5d4ee;
			border-radius: 20rpx;
			margin-left: 20rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			margin-bottom: 200rpx;
			background-color: #0b0e17;

			.typeBtns {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;

				.rBtn {
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					border: 1px solid #3d8ead;
					box-sizing: border-box;
					color: #69b2d5;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}


				.btnTxt {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-weight: bold;
					font-style: italic;
					border: 1px solid #1f4563;
					box-sizing: border-box;
					color: #1f4563;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.active {
					border: 1px solid #3d8ead;
					color: #69b2d5;
				}

				image {
					width: 100rpx;
					height: 50rpx;
				}
			}

			.gailv {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.lv {
					font-size: 24rpx;
				}


				.zhongjiangjilu {
					width: 120rpx;
					height: 60rpx;
				}
			}

			.records {
				margin-top: 20rpx;

				.record_item {

					height: 70rpx;
					display: flex;
					align-items: center;
					background-color: #181c28;
					padding: 10rpx;
					margin-bottom: 20rpx;
					border-radius: 5rpx;
					font-size: 20rpx;

					.record_img {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50rpx;
						margin-right: 20rpx;
					}

					.record_name {
						width: 20rpx;
						margin-right: 30rpx;
					}

					.record_type {
						padding: 5rpx 10rpx;
						font-size: 20rpx;
						color: #fff;
						border-radius: 5rpx;
						margin-right: 20rpx;

					}

					.record_goodName {
						flex: 1;
						height: 50rpx;
						line-height: 50rpx;
						display: -webkit-box;
						overflow: hidden;
						white-space: normal !important;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical
					}
				}

				.noRecord {
					text-align: center;
					color: #999;
					padding: 40rpx 0;
				}
			}

			.goods {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.current {
					.box {
						box-shadow: 0rpx 0rpx 10rpx 4rpx #fff;
					}
				}

				.li {
					width: 154rpx;
					margin-right: 1.5%;

					&:nth-child(4n) {
						margin-right: 0;
					}

					.box {
						width: 154rpx;
						height: 154rpx;
						border-radius: 10rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;

						image {
							width: 150rpx;
							height: 120rpx;
						}

						.type {
							height: 30rpx;
							// line-height: 40rpx;
							font-weight: bold;
							font-size: 16rpx;
							line-height: 30rpx;
							font-style: italic;
							background-color: rgba(197, 35, 24, .5);
							color: rgba(197, 35, 24, 1);
							text-align: center;
						}

						.type1 {
							background-color: rgba(197, 35, 24, .5);
							color: rgba(197, 35, 24, 1);
						}

						.type2 {
							background-color: rgba(87, 81, 125, .5);
							color: rgba(87, 81, 125, 1);
						}

						.type3 {
							background-color: rgba(186, 136, 111, .5);
							color: rgba(186, 136, 111, 1);
						}

						.type4 {
							background-color: rgba(97, 114, 170, .5);
							color: rgba(97, 114, 170, 1);
						}
					}

					.name {
						font-size: 16rpx;
						word-break: break-all;
						display: -webkit-box;
						overflow: hidden;
						white-space: normal !important;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						margin: 10rpx 0 20rpx;
					}


				}
			}
		}

		.btns {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 40rpx 40rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #000;
			z-index: 2;
			box-shadow: 0px 0px 20rpx 10rpx #000;

			.chou1 {
				width: 30%;
				height: 100rpx;
			}

			.chou3 {
				width: 30%;
				height: 100rpx;
			}

			.chou5 {
				width: 30%;
				height: 100rpx;
			}


		}
	}

	.lv1 {
		color: #7e1221;
	}

	.lv2 {
		color: #57517d;
	}

	.lv3 {
		color: #ba886f;
	}

	.lv4 {
		color: #6172aa;
	}

	.typebg1 {
		background-color: #7e1221;
	}

	.typebg2 {
		background-color: #57517d;
	}

	.typebg3 {
		background-color: #ba886f;
	}

	.typebg4 {
		background-color: #6172aa;
	}
</style>
